<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue -->
     <script src="js/vue.js"></script>
     <!-- 引入elementui -->
      <!-- 样式 -->
    <link rel="stylesheet" href="element-ui-2.13.0/lib//theme-chalk/index.css">   
       <!-- 组件库 -->
    <script src="element-ui-2.13.0/lib/index.js"></script>    

    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        
          
         
          
          <el-row>
            <el-button @click="fun1()" type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button @click="fun3()"  type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button  @click="fun2()" type="danger" round>危险按钮</el-button>
        
          </el-row>
          <el-row>
           
            <el-button @click="fun4()" type="success" round>请求user.json</el-button>
          </el-row>
          
         
    </div>
    
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
           
        },
        methods:{
            fun1() {
                this.$message({
                    type:"success",
                    message:"这是个成功的按钮"
                })
            },
            fun2() {
                this.$message.error(`这是一个错误的消息`)
            },
            fun3() {
                this.$message({
                    message: '恭喜你，这是一条成功消息',
                    type: 'success'
                });
            },
            fun4() {
                axios({
                    method:'get',
                    url: `info.json`,
                    responseType: 'json'
                }).then(resp => {
                    let user = resp.data
                    this.$message.success(`用户信息的json:${user.name}${user.age}`)
                }).catch(_ => {
                    this.$message.error(`请求失败......`)
                })
            }
        }
    })
</script>
